<!--
 * @Description: 
 * @Date: 2020-12-11 10:31:39
 * @LastEditors: lother
 * @LastEditTime: 2021-01-06 17:06:49
 * @FilePath: \AccountOpening-H5\src\views\documentType\index.vue
-->
<template>
    <div>
        <!-- <l-header :sliderShow="false"></l-header> -->
        <l-header :sliderShow="false" :closeShow="false"></l-header>
        <div class="w89">
            <h2 class="title">{{$t('documentType.index.5636jiatmo40')}}</h2>
            <ul class="imgList">
                <li v-for="(item,index) in list" :key="index" @click="typeChange(item,index)" :class="item.value== user_type?'on':''" v-if="Number(item.status) != 3">
                    <img :src="item.img_default" alt="" srcset="" class="img_default">
                    <img :src="item.img_hover" alt="" srcset="" class="img_hover">
                    <span class="expect" v-if="Number(item.status) == 2">
                        <span class="table">
                            <img src="@/assets/img/expect.png" alt="" class="icon">
                            <p>{{$t('documentType.index.56rymnr8ixw0')}}</p>
                        </span>
                    </span>
                </li>
            </ul>
            <h2 class="title">{{$t('documentType.index.5636jiatnuw0')}}</h2>
            <ul class="imgList">
                <li v-for="(item,index) in assetTypeList" :key="index" @click="assetsTypeChange(item,index)" :class="item.value== assetType?'on':''" v-if="Number(item.status) != 3">
                    <img :src="item.img_default" alt="" srcset="" class="img_default">
                    <img :src="item.img_hover" alt="" srcset="" class="img_hover">
                    <span class="expect" v-if="Number(item.status) == 2">
                        <span class="table">
                            <img src="@/assets/img/expect.png" alt="" class="icon">
                            <p>{{$t('documentType.index.56rymnr8ixw0')}}</p>
                        </span>
                    </span>
                </li>
            </ul>
            <van-button type="info" block class="next-step"  @click="submit">{{$t('documentType.index.5636jiatocw0')}}</van-button>
        </div>
        <van-overlay :show="dialogShow" @click="dialogShow = false">
            <div class="wrapper">
                <div class="block"  @click.stop>
                    <h3>{{$t('documentType.index.5636jiatooc0')}}</h3>
                    <ul>
                        <li v-for="(item,index) in dialogList" :key="index">
                            <div class="left">
                                <img :src="item.pic" alt="" srcset="">
                            </div>
                            <div class="right">
                                <h4>{{item['name_'+langSuff]}}</h4>
                                <p>{{item['remark_'+langSuff]}}</p>
                            </div>
                        </li> 
                    </ul>
                    <van-button type="info" block @click="dialogClick">{{$t('documentType.index.5636jiatox40')}}</van-button>

                </div>
            </div>
        </van-overlay>
    </div>
</template>
<script>
import {ready , preSubmit } from '@/api/allPage';
export default {
    data() {
        return {
            list:[],
            dialogList:[],doalogUrl:"",dialogShow:false,
            user_type:"",
            assetType:"",
            assetTypeList:[],
            activeIcon:  require('@/assets/img/icon_gx.png'),
            inactiveIcon: require('@/assets/img/icon_bgx.png'),
        }
    },
    computed:{
        langSuff(){
            return  this.$store.state.langSuff
        },
        LoList(){
            return JSON.parse(localStorage.getItem('typeForm'))??{}
        }

    },
    created(){
        this.onready()
        localStorage.removeItem('pageId')
        localStorage.removeItem('StepsPage')
    },
    methods:{
        typeChange(item,index){
            if(Number(item.status) == 1){
                this.dialogList  = item.readyList;
                this.user_type =  item.value;
                localStorage.setItem('userType',item.value)
            }
        },
        assetsTypeChange(item,index){
            if(Number(item.status) == 1){
                this.assetType =  item.value;
            }
        },
        submit(){
            if(this.user_type ==''){
                this.$toast(this.$t('documentType.index.5636jiatp6k0'))
                return false
            }else if(this.assetType ==''){
                this.$toast(this.$t('documentType.index.5636jiatpes0'))
                return false
            }
            this.dialogShow=true;
        },
        dialogClick(){
            this.dialogShow=false;
            this.userTypeClick()
            // this.$router.push('mainlandCard')

        },
        onready(type){
            ready({terminal :'h5'})
            .then(res=>{
                if(res.code==1){
                    this.list = res.data.region;
                    this.assetTypeList = res.data.assetType;
                    if(JSON.stringify(this.LoList)=='{}'){
                        this.user_type = this.list.find(item => Number(item.status) == 1 ).value
                        this.assetType = this.assetTypeList.find(item => Number(item.status) == 1 ).value;
                    }else{
                        this.user_type = this.LoList.user_type
                        this.assetType = this.LoList.assetType;
                    }
                    this.dialogList =  this.list.find(item => Number(item.status) == 1 ).readyList
                    localStorage.setItem('userType',this.user_type)

                }
            })
        },
        // 设置类型
        userTypeClick(){
            preSubmit({userType:this.user_type,assetType:this.assetType})
            .then(res=>{
                if(res.code==1){
                    localStorage.setItem('typeForm',JSON.stringify({assetType:this.assetType,user_type:this.user_type}))
                    this.pageFlow(this.user_type)
                }
            })
        },
        pageFlow(){
            this.$nextPage({show:true})
            .then(res=>{
                if(res.code==1){
                    var page_info = res.data.page_info
                    // return false
                    if(page_info.type==1 ){
                    this.$routerTo(page_info.url_path)
                    }else if(page_info.type==2){
                        this.$router.push({
                            path:'custom',
                            query:{id:page_info.id}
                        })
                    }
                }else if(res.code==102){
                    this.$routerTo('examine')
                }
            })
        }


    }
}
</script>
<style lang="less" scoped>
    .imgList{
        padding-top: .38rem;
        li{
            margin-bottom: .2rem;
            min-height: 1.51rem;
            position: relative;
            display: block;
            overflow: hidden;
            img{
                max-width: 100%;
                min-height: 1.51rem;
            }
            img.img_hover{
                display: none;
            }
            .expect{
                position: absolute;
                top:0;
                left: 0;
                width: 100%;
                height: 100%;
                background:rgba(247,247,247,.86);
                text-align: center;
                display: block;
                .table{
                    display: table-cell;
                    vertical-align:middle;
                    position: absolute;
                    left: 50%;
                    top:50%;
                    transform: translate(-50%,-50%);
                }
                .icon{
                    width: .58rem;
                    min-height: auto;
                    margin:0 auto .05rem;
                }
                p{
                    font-size: .26rem;
                    line-height: .46rem;
                    color: #404040;
                }
            }
        }
        li.on{
            img.img_default{
                display: none;
            }
             img.img_hover{
                display: block;
            }
        }
    }
    .van-radio-group--horizontal{
        padding:0.2rem 0 0 0 ;
    }
    .van-radio{
            width: 50%;
            margin: 0;
            padding:0.1rem 0;
            @{deep}.van-radio__icon{
                max-width: 0.28rem;
                display: flex;
                align-items: center;
               img{
                   width: 100%;
               }
            }
        }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        .block{
            width: 74%;
            background:@fff;
            border-radius: 3px;
            padding:0.49rem 0.4rem 0.4rem;
            h3{
                font-size:0.36rem;
                font-weight: normal;
                color: @sizeColor;
                line-height: 0.4rem;
                text-align: center;
                padding-bottom: 0.46rem;
            }
            ul{
                max-height: 4rem;
                overflow: auto;
                li{
                    display: flex;
                    justify-content: center; 
                    padding-bottom: 0.6rem;
                    div.left{
                        width: 0.8rem;
                        padding-right: 0.16rem;
                        img{
                            max-width: 100%;
                        }
                    }
                    div.right{
                        width: calc( 100%  - 0.96rem );
                        h4{
                            font-size: 0.26rem;
                            color: @sizeColor;
                            font-weight: normal;
                            line-height: 0.3rem;
                            padding-bottom: 0.1rem;
                        }
                        p{
                            font-size: 0.22rem;
                            line-height: 0.3rem;
                            color: #B3B3B3;
                        }
                    }
                }
            }
        }
    }
</style>